<template>
	<view>
		<!-- 顶部导航栏 -->
		<view class="head-nav">
			<radio-group class="radio-group" @change="radioChange">
				<label>
					<view class="text" :class="current == '精选文章' ? 'active' : ''">精选文章</view>
					<radio :value="'精选文章'"/>
				</label>
				<label>
					<view class="text" :class="current == '品牌列表' ? 'active' : ''">品牌列表</view>
					<radio :value="'品牌列表'"/>
				</label>
			</radio-group>
		</view>
		<!-- 精选文章内容 -->
		<view class="article-list" v-if="current=='精选文章'">
			<view class="article-item" v-for="item in articleList" :key="item.id">
				<view class="container">
					<image :src="item.coverImg" mode="" class="coverImg"  @click="godetail(item.id)"></image>
					<view class="title">{{item.title}}</view>
					<view class="author">{{item.author}}</view>
				</view>
				<view class="bottom">
					<!-- 左 -->
					<view class="view-block">
						<image src="/static/images/icons/view.png" mode="" class="icon"></image>
						<view class="count-text">{{item.viewCount}}</view>
					</view>
					<!-- 右 -->
					<view class="zan-share">
						<image src="../../static/images/icons/zan.png" mode="" class="icon"></image>
						<view class="collect">
							
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 品牌列表内容 -->
		<view class="brand-list" v-else-if="current=='品牌列表'">
			<view class="brand-item" v-for="item in brandList" :key="item.id">
				<image :src="item.bigPic" mode=""></image>
				<view class="container">
					<view class="title">{{item.name}}</view>
					<view class="desc">{{item.brandStory}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { findArticleByPage , findBrandsByPage } from "@/api/find/find.js"
	export default {
		data() {
			return {
				current:'精选文章',
				//精选文章列表
				articleList:[],
				articleStart:1,
				articleLimit:10,
				//品牌列表
				brandList:[],
				brandStart:1,
				brandLimit:10,
			};
		},
		methods:{
			// 切换事件
			radioChange(e){
				// console.log(e.detail.value);
				this.current = e.detail.value;
			},
			//初始化
			init(){
				findArticleByPage(this.articleStart,this.articleLimit).then(res=>{
					// console.log(res);
					this.articleList = res.data.rows;
				});
				findBrandsByPage(1,10).then(res=>{
					// console.log(res);
					this.brandList = res.data.rows;
				})
			},
			// 跳转到文章详情页面
			godetail(id){
				uni.navigateTo({
					url:`./articleDetail/articleDetail?id=${id}`
				})
			}
		},
		onReachBottom() {
			// console.log(1)
			if(this.current == '精选文章'){
				this.articleStart++;
				findArticleByPage(this.articleStart,this.articleLimit).then(res=>{
					this.articleList.push(...res.data.rows)
				});
				return
			}
			else if(this.current == '品牌列表'){
				this.brandStart++;
				findBrandsByPage(this.brandStart,this.brandLimit).then(res=>{
					this.brandList.push(...res.data.rows)
				});
				return
			}
		},
		onLoad() {
			this.init();
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f1ece7;
	}
	//顶部导航栏
	.head-nav {
		background-color: rgb(53, 78, 68)!important;
		width: 100%;
		height: 88rpx;
		color: #fff;
		font-size: 32rpx;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
		.radio-group {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			 radio {
				 display: none;
			 }
			 .text {
				 padding: 10rpx 0;
				 margin: 0 10rpx;
				 box-sizing: border-box;
				 border-bottom: 2rpx solid transparent;
			 }
			 //激活样式
			 .active {
				 border-bottom: 2rpx solid #fff;
			 }
		}
	}
	//精选文章内容部分
	.article-list {
		margin-top: 100rpx;
		.article-item {
			position: relative;
			width: 674rpx;
			height: 482rpx;
			border-radius: 24rpx;
			background-color: #fff;
			margin: 28rpx auto;
			overflow: hidden;
			 .container {
				 height: auto;
				 width: auto;
				 display: block;
				  .coverImg {
					  display: block;
					  width: 100%;
					  height: 382rpx;
				  }
				  .title {
					  position: absolute;
					  left: 20rpx;
					  top: 244rpx;
					  color: #fff;
					  font-size: 48rpx;
					  line-height: 68rpx;
				  }
				  .author {
					  position: absolute;
					  left: 20rpx;
					  top: 310rpx;
					  color: #fff;
					  font-size: 30rpx;
					  line-height: 42rpx;
				  }
			 }
			 //item底部
			 .bottom {
				 width: 100%;
				 height: 100rpx;
				 display: flex;
				 justify-content: space-between;
				 align-items: center;
				 box-sizing: border-box;
				 padding: 0 60rpx;
				 // 左
				 .view-block {
					 height: 100%;
					 display: flex;
					 align-items: center;
					  .icon {
						  width: 40rpx;
						  height: 40rpx;
						  margin-right: 30rpx;
					  }
					  .count-text {
						color: #3e3e3e;
						 font-size: 26rpx;	
					  }
				 }
				 // 右
				 .zan-share {
					 height: 100%;
					 display: flex;
					 align-items: center;
					 .icon {
						 width: 40rpx;
						 height: 40rpx;
						 margin-right: 30rpx;
					 }
					 .collect {
						 width: 50rpx;
						 height: 50rpx;
						 background: url('~@/static/images/icons/collection.png') no-repeat center;
						 background-size: 100% 100%;
					 }
				 }
			 }
		}
	}
	// 品牌列表内容部分
	.brand-list {
		width: 100%;
		height: 100%;
		margin-top: 100rpx;
		.brand-item {
			margin: 30rpx;
			background: #fff;
			border-radius: 8rpx;
			overflow: hidden;
			 image {
				 width: 100%;
				 height: 480rpx;
				 display: inline-block;
				 overflow: hidden;
				 position: relative;
			 }
			 .container {
				 margin: 15px;
				 background: #fff;
				 border-radius: 8rpx;
				 overflow: hidden;
				  .title {
					  font-size: 32rpx;
					  line-height: 44rpx;
					  color: #3e3e3e;
				  }
				  .desc {
					  font-size: 22rpx;
					  color: #b1b1b1;
					  line-height: 30rpx;
					  white-space: nowrap;
					  overflow: hidden;
				  }
			 }
		}
	}
</style>
